<template>
  <div>
    <Breadcrumb msg1="店铺管理" msg2="商品列表" />

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-input v-model="queryInfo.name" placeholder="请输入要查的商品名" clearable @clear="getData">
            <el-button slot="append" icon="el-icon-search" @click="getData(true)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <el-button type="primary" plain @click="staySend">待发货</el-button>
          <el-button type="primary"  plain @click="success">交易完成</el-button>
        </el-col>
      </el-row>

      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="商品名" prop="name"></el-table-column>
        <el-table-column label="商品单价" prop="price"></el-table-column>
        <el-table-column label="购买数量" prop="quantity"></el-table-column>
        <el-table-column label="总金额" prop="payment"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 2">
                <el-button type="primary" @click="send(scope.row.id)">发货</el-button>
            </template>
            <template v-else-if="scope.row.status === 4">
                <el-tag type="success">交易完成</el-tag>
            </template>
            <template v-else-if="scope.row.status === 3">
                <el-tag type="info">等待顾客确认</el-tag>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[3, 5, 10, 30]"
        :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
const requsetUrl = '/order/admin'
export default {
  data () {
    return {
      queryInfo: {
        product_name: '',
        page: 1,
        limit: 5,
        status: ''
      },
      tableData: [],
      total: 0
    }
  },
  components: {
    Breadcrumb
  },
  created () {
    const uid = window.sessionStorage.getItem('id')
    if (!uid) {
      window.alert('登录信息已过期，请重新登录')
      this.$router.push('/login')
    }
    this.queryInfo.user_id = uid
    this.getData()
  },
  methods: {
    getData (flag = false) {
      if (flag) {
        this.queryInfo.page = 1
        this.queryInfo.limit = 5
      } // 当商品选择搜索时 应把分页信息进行初始化
      this.$axios.get(`${requsetUrl}`,
        response => {
          this.tableData = response.data.records
          this.total = parseInt(response.data.total)
        },
        this.queryInfo
      )
    },
    handleSizeChange (newSize) {
      this.queryInfo.limit = newSize
      this.getData()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getData()
    },
    send (id) {
      this.$axios.put(`${requsetUrl}/send/${id}`,
        response => {
          this.getData()
        }
      )
    },
    staySend () {
      this.queryInfo.status = 2
      this.getData()
    },
    success () {
      this.queryInfo.status = 4
      this.getData()
    }
  }
}
</script>
<style scoped>
</style>
